<template>
    <div class="wh-100" style="background-color: white" v-loading="boxLoading">
        <div style="height: 60px" class="d-flex-align-center bor-base-b pl-24 fw-6 fs-18">简历管理</div>
        <div class="h-80 bor-base-b">
            <div class="d-flex bor-base-b">
                <div class="w-15 d-flex-align-center py-12 pl-24 mr-auto">
<!--                    <el-checkbox v-model="allChecked" @change="isAllChecked"></el-checkbox>-->
                    <Button style="background-color: white" @click="recommend(1, 2)">批量推荐</Button>
                    <Button style="background-color: white" @click="download">导出数据</Button>
                    <Button type="dashed" @click="changeTip">{{ openTip ? '关闭提示' : '开启提示' }}</Button>

                </div>
                <div class="w-60 px-24 d-flex d-flex-between-center">
                    <div class="w-20" v-has="'other'">
                        <Select  v-model="pageParams.schoolCode" clearable filterable placeholder="请选择学校">
                            <Option value="全部学校" >全部学校</Option>
                            <Option v-for="item in schoolSelection" :key="item.value"  :value="item.code">{{item.name}}</Option>
                        </Select>
                    </div>
                    <div class="w-15">
                        <Select  v-model="pageParams.isRecommend" clearable filterable placeholder="请选择">
                            <Option value="全部" >全部推荐状态</Option>
                            <Option value="已推荐" >已推荐</Option>
                            <Option value="未推荐" >未推荐</Option>
                        </Select>
                    </div>
                    <div class="w-15">
                        <Select  v-model="pageParams.graduationYear" clearable filterable placeholder="届别">
                            <Option value="全部" >全部届别</Option>
                            <Option v-for="item in classSelection" :key="item.value"  :value="item.title">{{item.title}}</Option>
                        </Select>
                    </div>
                    <div class="w-15">
                        <Select  v-model="pageParams.education" clearable filterable placeholder="学历">
                            <Option value="全部" >全部学历</Option>
                            <Option value="专科及以上" >专科及以上</Option>
                            <Option value="本科及以上" >本科及以上</Option>
                            <Option value="硕士及以上" >硕士及以上</Option>
                            <Option value="博士及以上" >博士及以上</Option>
                        </Select>
                    </div>
                    <div class="w-30 d-flex">
                        <Input class="w-70" placeholder="请输入学生姓名"  @on-keyup="pageParams.name=pageParams.name.replace(/\s/g,'')" v-model="pageParams.name"></Input>
                        <Button style="background-color: #1890ff; color: white" @click="toSearch">搜索</Button>
                    </div>
                </div>
            </div>
<!--                    $backColor 在main.js中            -->
            <div class="h-90">
                <Alert v-show="openTip" show-icon>
                    已选择
                    <span >{{ selectList.length }}</span>
                    项
                    <a @click="toggleSelection">清空</a>
                </Alert>
                <el-table
                    ref="table"
                    class="el-overflow-auto-hidden"
                    :height="heightNmber"
                    width="100%"
                    v-loading="loading"
                    empty-text="暂无数据"
                    :header-cell-style="{ background: $backColor,color: '#333333' }"
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="selectL"
                >
                    <el-table-column :selectable="rowselectable" type="selection" width="55" align="center">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                    <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
                    <el-table-column prop="sex" label="性别" align="center"></el-table-column>
                    <el-table-column prop="graduationYear" label="毕业年度" align="center"></el-table-column>
                    <el-table-column v-if="userRoles"  prop="schoolName" label="毕业院校" align="center"></el-table-column>
                    <el-table-column prop="department" label="院系" align="center"></el-table-column>
                    <el-table-column prop="specialty" label="专业" align="center"></el-table-column>
                    <el-table-column prop="address" label="现居住地" align="center"></el-table-column>
                    <el-table-column prop="isHideBio" label="简历状态" align="center"></el-table-column>
                    <el-table-column prop="updateTime" label="更新时间" align="center"></el-table-column>
                    <el-table-column prop="integrity" label="简历完成度" align="center" fixed="right" class="d-flex">
                        <template #default="scope">
                            <span>{{ scope.row.integrity }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="state" align="center" label="操作" fixed="right" class="d-flex">
                        <template #default="scope">
                            <el-button type="text" size="small" @click="toResumePreview(scope.row.studentUserId)">查看</el-button>
                            <el-button v-if="scope.row.isHideBio==='公开'" type="text" size="small" @click="recommend(scope.row, 1)">推荐</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!--分页-->
        <div class="h-10 fs-14 d-flex-center">
            <Page show-total show-sizer :total="pageTotal" :current="pageParams.pageNumber" :page-size="pageParams.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" show-elevator />
        </div>
        <el-dialog title="请选择推荐的用人单位" :visible.sync="dialogFormVisible" @close="closeDialog">
            <div class="bor-base-b bor-base-t mb-12 d-flex align-items-center" style="min-height: 40px">
                <div style="width: 70px" class="fs-14 mr-12">已选单位</div>
                <div style="width: calc(100% - 80px)">
                    <el-tag :key="item.id" v-for="item in dynamicTags" closable :disable-transitions="false" @close="handleClose(item)" style="margin-top: 5px; margin-bottom: 5px">
                        {{ item.unitName }}
                    </el-tag>
                </div>
            </div>
            <div class="d-flex-center flex-column bor-base-b w-100">
                <div class="w-50">
                    <el-input placeholder="请输入公司名称" @change="getAllEnterprise" v-model="searchName">
                        <el-button primary slot="append" @click="getAllEnterprise">搜索</el-button>
                    </el-input>
                </div>
                <div class="d-grid my-20 w-90 overflow-auto-hidden" style="height: 300px; grid-template-columns: repeat(3, 30%); grid-gap: 20px; grid-auto-rows: 40px">
                    <template v-if="companyList.length > 0">
                        <div class="bor-base d-flex align-items-center fs-12" style="border-radius: 5px" v-for="item in companyList">
                            <div @click="item.checked ? removeTag(item) : addTag(item)">
                                <input type="checkbox" name="num" value="1" v-model="item.checked" class="mr-8 ml-8" />
                                <span :class="{ selected: item.checked }">{{ item.unitName }}</span>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div>找不到符合搜索条件的企业！</div>
                    </template>
                </div>
            </div>

            <div slot="footer" class="dialog-footer d-flex-center">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="sendRecommendation">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { accessSchoolDataApi, getClassAPI } from '../../../api/bys/index';
import { getAllEnterpriseAPI, insertBioForEnterpriseAPI, resumeRecommendationAPI } from '../../../api/bys/recruitmentManagement/index';
import { bigBioExportAPI } from '@/api/Main/viewDetailsAboutADoubleMeetingApis';
export default {
    data() {
        return {
            schoolSelection: [],
            boxLoading: false,
            unitTotal: 0,
            companyList: [],
            dialogFormVisible: false,
            loading: false,
            modelState: 'all',
            pageTotal: '',
            searchName: '', //搜索公司名称
            pageParams: {
                pageNumber: 1,
                pageSize: 10,
                isRecommend: '全部', //是否推荐
                graduationYear: '全部', // 毕业年度
                education: '全部', //学历
                schoolCode: '全部学校', //学校
                name: '' // 姓名
            },
            classSelection: [], //届别列表
            modelPosition: '',
            positionSelection: [],
            tableData: [],
            userRoles: false,
            recommendParams: {
                enterpriseId: [],
                schoolId: '',
                talentId: []
            },
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            dynamicTags: [],
            inputVisible: false,
            inputValue: '',
            listSelectedId: [],
            heightNmber:'95%',
            openTip:true,
            selectList:[],
        };
    },
    mounted() {
        if(sessionStorage.getItem('roles')){
            if(JSON.parse(sessionStorage.getItem('roles'))[0] === "ROLE_SCHOOL"){

                this.userRoles = false;
            }else{
                this.userRoles = true;
            }
        }
        this.getList();
        this.getClass();
        this.getAllEnterprise();
        this.getSchoolData();
    },
    methods: {
        changeTip(){
            this.openTip = !this.openTip
            if(this.openTip){
                this.heightNmber='95%'
            }else{
                this.heightNmber='100%'
            }
        },
        toggleSelection() {
            this.$refs.table.clearSelection();
        },
        rowselectable(row, index){
            return row.isHideBio === "公开";
        },
        download() {
            console.log(11111);
            bigBioExportAPI().then(res => {
                this.importing1 = false;
                // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
                const blob = new Blob([res], { type: 'charset=utf-8' });
                let url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', '学生简历信息.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); // 删除节点
                window.URL.revokeObjectURL(url); //释放该 url
            });
        },


        //获取全部学校
        getSchoolData() {
            accessSchoolDataApi().then(res => {
                this.schoolSelection = res.result;
            });
        },
        // region TODO 关闭弹框
        closeDialog() {
            this.$refs.table.clearSelection(false);
            this.dynamicTags = [];
            this.companyList.forEach((item, index) => {
                this.companyList[index].checked = false;
            });

            this.searchName = '';
            this.dialogFormVisible = false;
        },
        cancel() {
            this.closeDialog();
        },
        // endregion
        //表格选中数据
        selectL(selection) {
            this.selectList=selection
            this.listSelectedId = selection.map(item => item.studentUserId);
        },
        // region TODO 列表查询
        getList() {
            this.loading = true;
            let schoolCode=""
           if(!(this.pageParams.schoolCode === "全部学校")) {
                 schoolCode=this.pageParams.schoolCode
           }

            resumeRecommendationAPI({ ...this.pageParams,schoolCode:schoolCode })
                .then(res => {
                    if (res.success) {
                        this.tableData = res?.result?.result || [];
                        this.pageTotal = res?.result?.total || 0;
                        this.loading = false;
                        console.log(this.tableData, '列表数据');
                    } else {
                        this.loading = false;
                    }
                })
                .catch(err => {
                    this.loading = false;
                    console.log(err);
                });
        },
        // endregion
        //简历查看
        toResumePreview(id) {
            this.$router.push({ name: 'ResumePreview', query: { id: id } });
        },

        // region TODO 推荐
        recommend(row, sign) {
            this.searchName=''
            this.getAllEnterprise()
            if (sign === 1) {
                this.recommendParams.talentId = row.studentUserId;
                this.dialogFormVisible = true;
            }
            if (sign === 2) {
                if (this.listSelectedId.length > 0) {
                    this.recommendParams.talentId = this.listSelectedId;
                    this.dialogFormVisible = true;
                } else {
                    this.$message.warning('请至少选择一项！');
                }
            }
        },
        getAllEnterprise() {
            getAllEnterpriseAPI({
                enterpriseName: this.searchName
            }).then(res => {
                if (res.success) {
                    console.log(res, '搜索到的公司');
                    let data = res?.result?.result || [];
                    this.unitTotal = res?.result?.total || 0;
                    // data.map((item, index) => {
                    //     this.companyList.push(Object.assign({}, item, { checked: false }));
                    // });
                    this.companyList=data
                    console.log(this.companyList, 'this.companyList');
                    // this.companyList = res?.result?.result || ''
                    // this.unitTotal = res?.result?.total || 0
                    // this.companyList.map((item,index) => {
                    //   this.companyList.push(Object.assign({},item,{checked:false}))
                    // })
                    // console.log(this.companyList,'公司列表')
                }
            });
        },
        // endregion
        // region TODO 插入一个标签
        addTag(item) {
            item.checked = !item.checked;
            if (JSON.stringify(this.dynamicTags).indexOf(JSON.stringify(item.id)) == -1) {
                //如果数组中不存在该项，把该项添加到数组中
                this.dynamicTags.push(item);
            } else {
                this.$message.warning('该公司已在列表中');
            }
            // if (!this.dynamicTags.includes(item.id)) {
            //   this.dynamicTags.push(item)
            //   item.checked = true
            // }
        },
        // endregion
        // region TODO 移除一个标签
        removeTag(item) {
            item.checked = !item.checked;
            for (let i = 0; i < this.dynamicTags.length; i++) {
                //判断数组中是否有该数据，然后根据索引删除
                if (this.dynamicTags[i].id === item.id) {
                    this.dynamicTags.splice(i, 1);
                }
            }
            // const index = this.dynamicTags.indexOf(item.id);
            // if (index !== -1) {
            //   this.dynamicTags.splice(index, 1);
            // }
        },
        // endregion
        // region TODO 发送推荐
        sendRecommendation() {
            this.recommendParams.enterpriseId = this.dynamicTags.map(item1 => {
                return item1.id;
            });
            insertBioForEnterpriseAPI(this.recommendParams).then(res => {
                if (res.success) {
                    this.dialogFormVisible = false;
                    this.$message.success(res.message);
                    this.searchName = '';
                } else {
                }
            });
            // this.$confirm('您确定将该学生推荐给该公司吗?', '提示', {
            //   confirmButtonText: '确定',
            //   cancelButtonText: '取消',
            //   type: 'warning'
            // }).then(() => {
            //
            //   this.$message({
            //     type: 'success',
            //     message: '推荐成功!'
            //   });
            // }).catch((err) => {
            //   this.$message({
            //     type: 'info',
            //     message: '取消推荐'
            //   });
            // });
        },
        // endregion
        // region TODO 届别查询
        getClass() {
            getClassAPI().then(res => {
                console.log(res, '届别');
                this.classSelection = res.result;
            });
        },
        // endregion
        toSearch() {
            this.pageParams.pageNumber = 1;
            this.getList();
        },
        // region TODO 分页
        changePage(val) {
            this.pageParams.pageNumber = val;
            //调接口
            this.getList();
        },
        changePageSize(val) {
            this.pageParams.pageSize = val;
            //调接口
            this.getList();
        },
        // endregion
        isAllChecked(e) {
            if (e) {
                this.$refs.table.toggleAllSelection();
            } else {
                this.$refs.table.clearSelection();
            }
            console.log(e, 'eeee');
        },
        // handleSlectionChange(selection){
        //   console.log(selection,'选中行的数据')
        // },
        // region TODO 标签
        handleClose(item) {
            console.log(item, '标签');
            this.dynamicTags.splice(this.dynamicTags.indexOf(item.id), 1);
            //将companyList数组对象的id存储在idArr中
            let idArr = this.companyList.map(item1 => {
                return item1.id;
            });
            console.log(idArr);
            //选择出对应的id的索引
            const index = idArr.indexOf(item.id);
            console.log(index);
            //修改
            this.companyList[index].checked = false;
            // const item1 = this.companyList.find(item => item.unitName === tag);
            // console.log(item,'item')
            // if (item) {
            //   item.checked = false
            // }
        }
        // endregion
    }
};
</script>
<style>
.el-tag + .el-tag {
    margin-left: 10px;
}
.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
.selected {
    color: #1d8ce0;
}
.checkbox:checked {
    background-color: blue;
}
input[type='checkbox'] {
    cursor: pointer;
    position: relative;
    width: 15px;
    height: 15px;
    font-size: 14px;
}
input[type='checkbox']::after {
    position: absolute;
    top: 0;
    border: none;
    /* background-color: #ff670c; */
    color: #fff;
    width: 15px;
    height: 15px;
    display: inline-block;
    visibility: visible;
    padding-left: 0px;
    text-align: center;
    content: ' ';
    border-radius: 1px;
}
input[type='checkbox']:checked::after {
    background-color: #1d8ce0;
    border-color: #1d8ce0;
    content: '✓';
    font-size: 12px;
    font-weight: bold;
}
</style>
